<template>
  <div class="picturePreview">
    <div class="pictureheader bg_style border_style ">
      <div class="search" :class="{ 'searchset':searchHflag}">
        <search-selector ref="selectorDom" @setRotate="setRotate"></search-selector>
        <div class="card-url" :class="curTheme" @click="cardClick()">
          <span v-if="card_flag" class="icon iconfont icon-liebiaomoshi"></span>
          <span v-else class="icon iconfont  icon-kapianmoshi"></span>
        </div>
        <YsButton type="primary" class="searchBtn" @click="getImagseItem()">查询</YsButton>
      </div>
    </div>
    <div class="picturebox bg_style border_style " :class="{ 'pictureFooter':searchHflag}">
      <div class="pictureimg">
        <div class="pictureiCon">
          <ul class="pictureiTop">
            <li>
              <label class="text_01">任务名称：</label>
              <span class="text_01">{{ jobBean.detect_name }}</span>
            </li>
            <li>
              <label class="text_01">检测样本量：</label>
              <span class="text_01">{{ jobBean.job_sample_num }}</span>
            </li>
            <li>
              <label class="text_01">检测人：</label>
              <span class="text_01">{{ jobBean.to_ent_name }}</span>
            </li>
            <li>
              <label class="text_01">检测开始时间：</label>
              <span class="text_01">{{ jobBean.detect_start_time }}</span>
            </li>
            <li>
              <label class="text_01">检测结束时间：</label>
              <span class="text_01">{{ jobBean.detect_end_time ? jobBean.detect_end_time : "无" }}</span>
            </li>
          </ul>
          <YsDropdown placement="bottom-end" v-if="card_flag" class="icon-download">
            <span class="icon iconfont icon-a-zu49358 text_01"></span>
            <YsDropdownMenu class="pictnthree" slot="list">
              <YsDropdownItem @click.native="setDownloadFn(0)">PNG下载</YsDropdownItem>
              <YsDropdownItem @click.native="setDownloadFn(1)">PDF下载</YsDropdownItem>
            </YsDropdownMenu>
          </YsDropdown>
        </div>
        <tableList v-if="card_flag" ref="tableDom" @getjob="getjobFn"></tableList>
        <cardList v-else ref="cardDom" @getjob="getjobFn"></cardList>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import canvasTemp from "_c/tableReport/canvasTemp.vue";
import SearchSelector from "_c/common/SearchSelector/index.vue";
import CardList from "./components/cardList.vue";
import TableList from "./components/tableList.vue";
import { mapState } from "vuex";
export default {
  name: 'picturePreview',
  components: {
    canvasTemp,
    SearchSelector,
    CardList,
    TableList
  },
  data() {
    return {
      card_flag: false,
      searchHflag: false,
      file_id: null,
      flawBeans: [],
      cur_qualified: null,
      jobBean: [],
    }
  },
  computed: {
    ...mapState(['curTheme']),
  },
  mounted() {
    this.card_flag = this.$store.state.Common.cardFlag
  },
  methods: {
    ...mapActions(['getDetectJobList', "getFileLastUseTempListAPI"]),
    //返回
    goack() {
      this.$router.back(-1)
    },
    //设置选中
    setRotate(item) {
      this.searchHflag = item
    },
    //获取数据
    getImagseItem() {
      if (this.$refs.cardDom) {
        this.$refs.cardDom.getImagseList()
      }
    },
    //获取数据
    getjobFn(data) {
      this.jobBean = this.$options.data().jobBean
      this.jobBean = data
    },
    //切换页面
    cardClick() {
      this.card_flag = !this.card_flag
    },
    setDownloadFn(num) {
      this.$refs.tableDom.getTableAll(num)
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/pictureImgDetails") {
      this.$store.commit('setCardFlagVal', this.card_flag)
    } else {
      this.$store.commit('setCardFlagVal', false)
    }
    next()
  }
}
</script>

<style scoped lang='less'>
/deep/ .contentCardBox {
  height: auto !important;
}

.modalSelect {
  /deep/ .ivu-select-input {
    height: 38px !important;
    line-height: 38px !important;
  }
}

.picturePreview {
  height: 100%;
  overflow: hidden;

  .picturebox {
    border: 1px solid rgba(207, 215, 229, 0.6);
    border-radius: 4px;
    height: calc(100% - 102px);

    // overflow: auto;
    .pictureTree {
      padding: 20px;
      width: 270px;
    }

    .pictureimg {
      width: 100%;
      height: 100%;
      padding: 0 16px;

      .pictureiCon {
        width: 100%;
        display: flex;
        align-items: center;

        .icon-download {
          margin-left: auto;
        }

        .pictureiTop {
          height: 64px;
          align-items: center;
          display: flex;

          li {
            display: flex;
            margin-right: 30px;
            font-size: 16px;

            label {
              // color: rgba(64, 86, 128, 0.6);
              opacity: .6;
            }

            span {
              color: rgba(64, 86, 128, 1);
            }
          }
        }
      }
    }
  }

  .pictureFooter {
    height: calc(100% - 150px);
  }

  .pictureheader {
    width: 100%;
    // height: 72px;

    border: 1px solid rgba(207, 215, 229, 0.6);
    border-radius: 4px;
    margin-bottom: 8px;
  }
}

.model-box {
  padding: 10px 32px 24px;
}

.searchset {
  height: auto !important;
}

.search {
  height: 72px;
  overflow: hidden;
  display: flex;
  // align-items: center;
  padding: 16px;

  .goback {
    margin-left: auto;
  }

  .card-url {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    flex-shrink: 0;
    border-radius: 4px;
    background: #ebeef5;
    margin-left: auto;
  }

  .theme-blue.card-url {
    background: #405680 !important;
    color: #fff;
  }
}

//解决图片无法加载赋值默认图片
.service-img {
  &:after {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 197px;
    background: url("../../assets//images/default.png") no-repeat;
    background-size: 100% 100%;
    background-color: #fff;
  }
}

.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
  margin-left: auto;
}
</style>